---
comments: false
---


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <script src="js/shufaDictJS.js"></script>
    <link rel="stylesheet" href="css/shufaDictCSS.css">
    <style>
        img {
            position: absolute;
        }
        textarea {
            display: block;
            margin: 0 auto;
            background-color: var(--bg-content-color);
            /* border: 2px solid lightgray; */
            width: 100%; /* 设置宽度自适应 */
            resize: vertical; /* 允许垂直调整大小 */
            outline: none; /* 移除选中时的默认边框 */
            color: var( --title-color);
            border-radius: 5px; 
            padding: 10px;
            
        }
        .container {
            position: relative;
            width: fit-content;
            margin: 20px;
        }
        #charCount {
            position: absolute;
            bottom: 7%;
            right: 15px;
            font-size: 12px;
            color: #888;
        }
        textarea:focus {
            border-color: var(--main-color);
        }
        #inputText {
            border-width: 0px;
            background-color: var(--bg-color);
        }
    </style>
</head>

<body>
    <div id="buttonContainer">
        <div id="backButton"></div>
    </div>
    <div>
        <div class="container">
            <textarea id="inputText" rows="4" cols="50" placeholder="最多输入32个字"></textarea>
            <div id="charCount">0/32</div>
        </div>
        <div class="text-button-container">
            <button class="text-button" onclick="textButtonAction1()">下一步</button>
        </div>
    </div>
    
</body>
<script>
    hiddenEle()
    var elements = document.querySelector('.post-title__text');
    elements.textContent = '集字'

    var postTitle = document.querySelector('.post-title');
    postTitle.style.display = 'none';
    var headeRight = document.querySelector('.header__right');
    headeRight.style.display = 'none';

    var headeLeft = document.querySelector('.header__left');
    headeLeft.style.display = 'none';
    

    var img = document.getElementById('backButton');
    img.addEventListener('click', function () {
        window.history.back()
    });

    function textButtonAction1() {
        const inputText = document.getElementById('inputText');
        const text = inputText.value;
        localStorage.setItem('jiziInputContent', text);
        window.location.href = 'jizi2_next.html';
    }

    document.addEventListener('DOMContentLoaded', (event) => {
            const textarea = document.getElementById('inputText');
            const charCount = document.getElementById('charCount');
            const maxChars = 32;
            textarea.addEventListener('input', function() {
                if (this.value.length > maxChars) {
                    this.value = this.value.substring(0, maxChars);
                }
                charCount.textContent = `${this.value.length}/${maxChars}`;
            });
        });
</script>

</html>